<template>
  <div class="demo">
    <template>
      <div v-if="mode === 'edit'">
        <el-input v-model="phoneNum" placeholder="请输入电话号码" @input="check" :disabled="disabled"></el-input>
        <div class="el-form-item__error" v-if="phoneError">电话格式不正确！</div>
      </div>
      <div v-else>{{ value }}</div>
    </template>
  </div>
</template>

<script>
import datasource from '../../mixins/steps-datasource'
export default {
  name: 'phone',
  mixins: [datasource],
  components: {},
  props: {
    value:{},
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      phoneNum: '',
      phoneError: ''
    }
  },
 
  watch: {
  },
  mounted() {
    if(this.value){
      this.phoneNum = this.value;
      if(this.mode == 'view'){
          this.disabled = true;
      }
    }
  },
  computed: {
  },
  methods: {
    check(){
      this.$emit("input", this.phoneNum)
      var re = /^((0\d{2,3}(-)?\d{7,8})|(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8})$/;
      var result = re.test(this.phoneNum); 
      if(!result & this.phoneNum!=='') {
        this.phoneError = true
      } else {
        this.phoneError = false
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.demo {
  width: 100%;
}
</style>